<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CSS Compressor - Online code compressor for Cascading Style Sheets</title>

<link href="compressor.css" media="screen" rel="stylesheet" type="text/css" />

</head>
<body>


<div class="header">
<div class="hd-l">
<div class="logo">
<a href="http://www.csscompressor.com/" title="CSS Compressor">
<img src="http://www.csscompressor.com/images/logo.gif" alt="CSS Compressor Logo" />
</a>
</div>
</div>
<div class="hd-r">
<div class="textright">the best way to compress css<br />make your site fast for free</div>
</div>
</div>
<div class="clear"></div>
<div class="topnav"></div>
<div class="clear"></div>
<div class="container">
<div class="c-l">
<div class="c">
<h1>What is Cascading Style Sheets (CSS)?</h1>
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language.<br /><br /><h1>CSS Compressor</h1>Use this Cascading Style Sheets, CSS Compressor to compress CSS to reduce CSS code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. It is quick, easy and free!<br /><br /><br /><br />

<form id="webForm" action="#" onsubmit="return false">
<p>
<b>Compression Mode:</b><br />
<select style="width:15em;" name="mode" id="mode">
<option value="3">Highest</option>
<option value="2" selected="selected">High</option>
<option value="1">Standard</option>
<option value="0">Low</option>
</select>
</p>

<div>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2">
<b>Compression Options:</b>
</td>
</tr>
<tr>
<td width="50%">
<input type="checkbox" name="sort_de" id="sort_de" />
<label for="sort_de">Sort Properties</label><br />
<input type="checkbox" name="compress_c" id="compress_c" checked="checked" />
<label for="compress_c">Compress colors</label><br />
<input type="checkbox" name="compress_fw" id="compress_fw" checked="checked" />
<label for="compress_fw">Compress font-weight</label><br />
</td>
<td width="50%">
<input type="checkbox" name="lowercase" id="lowercase" value="lowercase" />
<label title="lowercase elementnames needed for XHTML" class="help" for="lowercase">Lowercase selectors</label><br />
<input type="checkbox" name="rbs" id="rbs" checked="checked" />
<label for="rbs">Remove unnecessary backslashes</label><br />
<input type="checkbox" id="remove_last_sem" name="remove_last_sem" checked="checked" />
<label for="remove_last_sem">Remove unnecessary semi-colons</label><br />
</td>
</tr>
</table>

</div>

<p style="width:600px">
<b>CSS Input:</b><br />
<textarea id="css_text" name="css_text" rows="10" cols="35" dflt="Paste the CSS source code you want to compress here" class="required">
</textarea>
</p>

<input type="hidden" name="optimise_shorthands" value="1" />
<input type="hidden" name="merge_selectors" value="2" />
<input type="hidden" name="case_properties" value="1" />
<input type="hidden" name="post" />

<div style="width:600px">

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%">
<div id="statusmessage" style="margin:0;padding:0;display:none;"></div>
<div id="loader" style="margin:0;padding:0;display:none;">
<img src="loading.gif" alt="Loading.." width="128" height="15" border="0" style="border:0;padding:0;margin:0" /></div>
</td>
<td width="50%" class="textright">
<input type="submit" value="Compress" id="submit" class="button" />&nbsp;&nbsp;
<input type="reset" value="Reset" class="button" />
</td>
</tr>
</table>
</div>

<div style="width:600px">
<div id="toolresult" style="margin:0;padding:0;"></div>
</div>
</form>
</div>
</div>
<div class="c-r">
<div class="box">
<div class="c textcenter">
<!--
<script type="text/javascript">
google_ad_client = "pub-3668186606934694";google_ad_slot = "2011417398";google_ad_width = 300;google_ad_height = 250;</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script><br /><br />
-->
<div class="bookmark">
<h6>Bookmark &amp; Share</h6>
<ul>
<li>
<a href="#" title="Add to 'CSS Compressor' Favorites Bookmark" onclick="bookmarkthis('CSS Compressor','http://www.csscompressor.com/');return false;">
<img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_favorites.gif" alt="Add to Favorites Bookmark" /></a></li>
<li>
<a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&amp;url=http://www.csscompressor.com/&amp;title=CSS+Compressor" title="Add 'CSS Compressor' to Digg" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_digg.gif" alt="Digg" /></a></li><li><a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=http://www.csscompressor.com/&amp;title=CSS+Compressor" title="Add 'CSS Compressor' to del.icio.us" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_delicious.gif" alt="del.icio.us" /></a></li><li><a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=http://www.csscompressor.com/" title="Add 'CSS Compressor' to Technorati" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_technorati.gif" alt="Technorati" /></a></li><li><a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=http://www.csscompressor.com/&amp;title=CSS+Compressor" title="Add 'CSS Compressor' to Reddit" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_reddit.gif" alt="Reddit" /></a></li><li><a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=http://www.csscompressor.com/&amp;title=CSS+Compressor" title="Add 'CSS Compressor' to StumbleUpon" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_stumbleupon.gif" alt="StumbleUpon" /></a></li><li><a rel="nofollow" target="_blank" href="http://www.furl.net/storeIt.jsp?u=http://www.csscompressor.com/&amp;t=CSS+Compressor" title="Add 'CSS Compressor' to Furl" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_furl.gif" alt="Furl" /></a></li><li><a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=http://www.csscompressor.com/&amp;title=CSS+Compressor" title="Add 'CSS Compressor' to Magnolia" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_magnolia.gif" alt="Ma.gnolia" /></a></li><li><a rel="nofollow" target="_blank" href="http://www.newsvine.com/_tools/seed&amp;save?u=http://www.csscompressor.com/&amp;h=CSS+Compressor" title="Add 'CSS Compressor' to NewsVine" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_newsvine.gif" alt="NewsVine" /></a></li><li><a rel="nofollow" target="_blank" href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=http://www.csscompressor.com/&amp;Title=CSS+Compressor" title="Add 'CSS Compressor' to Blinklist" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;">
<img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_blinklist.gif" alt="Blinklist" /></a></li><li><a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=http://www.csscompressor.com/" title="Share 'CSS Compressor' on Facebook" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_facebook.gif" alt="Facebook" /></a></li><li><a rel="nofollow" target="_blank" href="http://www.bloglines.com/sub/http://www.csscompressor.com/" title="Add 'CSS Compressor' to Bloglines" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_bloglines.gif" alt="Bloglines" /></a></li><li><a rel="nofollow" target="_blank" href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http://www.csscompressor.com/&amp;title=CSS+Compressor" title="Add 'CSS Compressor' to Blogmarks" onclick="window.open(this.href, '_blank', 'scrollbars=yes, menubar=no, border=0, height=600, width=750, resizable=yes, toolbar=no, location=no, status=no'); return false;"><img border="0" width="16" height="16" src="http://www.csscompressor.com/images/bm_blogmarks.gif" alt="Blogmarks" /></a></li></ul></div></div> </div> </div> </div> <div class="clear"></div><br /><br /><div class="ft"><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td width="50%" align="left">&copy; <a href="http://www.csscompressor.com/" title="css compressor">css compressor</a></td><td width="50%" align="right">related sites: <a href="http://www.javascriptbeautifier.com/" title="javascript beautifier" target="_blank">javascript beautifier</a></td></tr></table></div> <br /><br />

<script src="http://www.csscompressor.com/js.protoaculous1.6.0.2.js" type="text/javascript"></script>

<script type="text/javascript">
Prototype.Browser.IE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring (navigator.userAgent.indexOf("MSIE")+5))==6;
Prototype.Browser.IE7 = Prototype.Browser.IE && !Prototype.Browser.IE6;
var gSite = '';
var gSiteIm = '';
var gError = false;

function activateForm()
{
	$('webForm').getElements().each(function(elem)
	{
		var dv = elem.getAttribute('dflt');
		switch (elem.type)
		{
			case 'textarea':
				elem.value = dv;
				elem.observe('focus', function() {					
					if (!(elem.hasClassName('error')))
					{
						elem.addClassName('pick');
					}					
					if (((elem.getValue() == dv) || (!(elem.present()))) && (!(elem.hasClassName('error'))))
					{
						elem.value = '';
					}									
				});
				elem.observe('blur', function() {					
					if (!(elem.hasClassName('error')))
					{
						if (((elem.value).strip() === '') || (elem.getValue() == dv))
						{
							elem.removeClassName('pick').value = dv;
						}
						else
						{
							elem.removeClassName('pick');
						}
					}					
				});
			break;

			default:
			break;
		}
	});
}
// Run the tool
function runTool()
{
	var f = $('webForm');
	var errorMsg = '';
	var hasError = false;
	var isRequired = false;
	var isEmpty = false;

	// Form validation
	f.getElements().each(function(elem)
	{
		var dv = elem.getAttribute('dflt');
		isRequired = false;
		isEmpty = (elem.present())?false:true;
		if ((dv && (!isEmpty)) && (elem.getValue().strip() == dv))
		{
			isEmpty = true;
		}
		$w(elem.className).each(function(cn)
		{
			switch(cn)
			{
				case 'required':
					isRequired = true;
				break;
			}
		});
		if ((isRequired && isEmpty) || (isRequired && hasError) || (!isRequired && !isEmpty && hasError))
		{
			hasError = true;
			
			if (errorMsg==='')
			{
				alertError('This is a required field.');
			}
			else
			{
				alertError(errorMsg);
			}
			elem.addClassName('error').value = '';
			elem.focus();				
			
			f.observe('click', function() {
				alertError();
				$(this).stopObserving('click');
				elem.removeClassName('error');
				if ((elem.getValue()).strip() === '')
				{
					elem.value = dv;
				}
			});			
			throw $break;
		}
	});
	if (!hasError)
	{		
		$('loader').setStyle({ display:'' });
		
		var url = gSite + 'controller';
		var pars = '?'+f.serialize() + '&r=' + rand();
		var myAjax = new Ajax.Request(url,{
			method:'post',parameters:pars,
			onCreate:function(){
				$('toolresult').setStyle({ display:'none' });
			},
			onSuccess:function(transport){
				var data = (transport.responseText).evalJSON(true);
				toolOnSuccess(data);				
			},
			onFailure:function(){
				$('loader').setStyle({ display:'none' });
				f.enable();
				f.observe('click', function() {
					alertError();
					$(this).stopObserving('click');
				});
			}
		});
	}
}
function toolOnSuccess(data)
{
	$('loader').setStyle({ display:'none' });	
	$('toolresult').update(data.html);
	Effect.Appear('toolresult', { duration: 2 });	
}
// Reset tool
function resetTool()
{
	$('loader').setStyle({ display:'none' });
	$('toolresult').setStyle({ display:'none' });
}
// Return a random string
function rand()
{
	return Math.round(Math.random()*10000000);
}
// Add to bookmark
function bookmarkthis(title, url)
{
	if (window.sidebar)
	{ // Firefox
		window.sidebar.addPanel(title, url, "");
	}
	else if (document.all)
	{ // IE
		window.external.AddFavorite(url, title);
	}
	else if (window.opera && window.print)
	{ // opera
		var elem = document.createElement('a');
		elem.setAttribute('href',url);
		elem.setAttribute('title',title);
		elem.setAttribute('rel','sidebar');
		elem.click();
	}
}
// Alert box on form
function alertError(msg)
{
	// If there is a string, show the alert
	if (typeof(msg) != 'string')
	{
		$('statusmessage').setStyle({ display:'none' });
	}
	// Else hide the alert
	else
	{
		$('statusmessage').update(msg);
		Effect.Appear('statusmessage', { duration: 1.2 });
	}
}
// Perform these actions onload
Event.observe(window, 'load', function() {
	var f = $('webForm');
	if (f)
	{
		f.observe('submit', runTool).observe('reset', resetTool);
		activateForm();
	}
});
</script>

<!--
<link href="compressor.css" media="screen" rel="stylesheet" type="text/css" />

<script src="compressor.js" type="text/javascript"></script>
<link href="compressor.css" media="screen" rel="stylesheet" type="text/css" />
-->
</body>
</html>
